<template>
  <div class="playlistitem">
    <div>
      <!-- 顶部导航栏 -->
      <navigation />
    </div>
    <div class="container w">
      <div class="left">
        <div class="head">
          <div class="top">
            <!-- 歌单封面 -->
            <div class="img">
              <img :src="playlistitem.coverImgUrl" alt="" />
            </div>
            <!-- 标题内容 -->
            <div class="text">
              <div class="zhuanjiname">{{ playlistitem.name }}</div>
              <div class="user">
                <!-- 创建者头像 -->
                <span class="pic"
                  ><img :src="playlistitem.creator.avatarUrl" alt=""
                /></span>
                <!-- 创建者名字 -->
                <span class="name">{{ playlistitem.creator.nickname }}</span>
                <!-- 创建时间 -->
                <span class="time">{{ playlistitem.createTime }}创建</span>
              </div>

              <!-- 歌单标签 -->
              <div class="tag">
                标签：<span
                  v-for="(item, index) in playlistitem.tags"
                  :key="index"
                  >{{ item }}</span
                >
              </div>
              <!-- 歌单描述 -->
              <div class="describe">
                {{ playlistitem.description }}
              </div>
              <!-- 展示全部 -->
              <div class="more">全部></div>
            </div>
          </div>

          <div class="buttom">
            <div class="el-icon-video-play">播放全部</div>
            <div class="el-icon-star-off">收藏</div>
          </div>
        </div>
        <table>
          <tr class="thead">
            <td>序号</td>
            <td>歌曲</td>
            <td>歌手</td>
            <td>专辑</td>
            <td>时长</td>
          </tr>
          <tr
            class="tbody"
            v-for="(item, index) in playlistitem.tracks"
            :key="index"
            @click="musicid(item.id)"
          >
            <td style="">
              <div>{{ index + 1 }}</div>
            </td>
            <td>
              <div>
                <img
                  :src="item.al.picUrl"
                  alt=""
                  style="width: 35px; height: 35px;"
                />
              </div>
              <span>{{ item.name }}</span>
            </td>
            <td>{{ item.ar[0].name }}</td>
            <td>{{ item.al.name }}</td>
            <td>Savings</td>
          </tr>
        </table>
      </div>
      <div class="right">
        <!-- 喜欢这个歌单的人 -->
        <div class="like">
          <div class="head">喜欢这个歌单的人</div>
          <ul class="box">
            <li v-for="(item, index) in likeplaylist" :key="index">
              <img :src="item.avatarUrl" alt="" />
              <span>{{ item.nickname }}</span>
            </li>
          </ul>
        </div>
        <!-- 相关推荐 -->
        <div class="recommend">
          <div class="head">相关推荐</div>
          <ul class="box">
            <li
              v-for="(item, index) in recommend"
              :key="index"
              @click="change(item.id)"
            >
              <!-- 封面图 -->
              <div class="pic">
                <img :src="item.coverImgUrl" alt="" />
              </div>

              <!-- 歌单名以及作者 -->
              <div class="text">
                <div class="title">{{ item.name }}</div>
                <div class="name">By&nbsp;{{ item.creator.nickname }}</div>
              </div>
            </li>
          </ul>
        </div>

        <!-- 精彩评论 -->
        <div class="comment">
          <div class="head">精彩评论</div>
          <ul class="box">
            <li v-for="(item, index) in comment" :key="index">
              <!-- 用户头像 -->
              <div class="pic">
                <img :src="item.user.avatarUrl" alt="" />
              </div>

              <!-- 用户名和评论内容 -->
              <div class="text">
                <div class="top">
                  <span class="name">{{ item.user.nickname }}</span>
                  <span class="time">7小时前</span>
                </div>
                <div class="bottom">
                  {{ item.content }}
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import navigation from "../../components/navigation/NaviGation";
import Bus from "../../Bus";

import {
  playlistitem,
  likeplaylist,
  recommend,
  comment,
  musicurl,
} from "../../network/index";
export default {
  name: "playlistitem",
  data() {
    return {
      playid: "",
      playlistitem: {
        creator: {
          avatarUrl: "",
        },
      },
      privileges: [],
      likeplaylist: {},
      recommend: [],
      comment: [],
      musicids: "",
      musicurl: "",
    };
  },
  components: {
    navigation,
    // 歌单详情请求方法
    playlistitem,
    // 收藏歌单用户请求方法
    likeplaylist,
    // 相关歌单请求方法
    recommend,
    // 歌单评论请求方法
    comment,
    // 歌曲url
    musicurl,
  },
  created() {
    // 接受首页跳转时传过来的歌单id
    this.playid = this.$route.query.id;
    // 获取歌单详情列表
    playlistitem(this.playid).then((res) => {
      // console.log(res);
      if (res.data.code == "200") {
        this.playlistitem = res.data.playlist;
      }
    });
    // 获取歌单收藏者
    likeplaylist(this.playid).then((res) => {
      if (res.data.code == "200") {
        this.likeplaylist = res.data.subscribers;
      }
    });
    // 获取相关歌单
    recommend(this.playid).then((res) => {
      if (res.data.code == "200") {
        this.recommend = res.data.playlists;
      }
    });

    // 获取歌单评论
    comment(this.playid).then((res) => {
      // console.log(res);
      if (res.data.code == "200") {
        this.comment = res.data.comments;
      }
    });
  },
  methods: {
    musicid(id) {
      this.musicids = id;
      musicurl(this.musicids).then((res) => {
        if (res.data.code == "200") {
          this.musicurl = res.data.data[0].url;
          // 发送音乐url给music组件
          Bus.$emit("Sendmusic", this.musicurl);
        }
      });
    },
    // 点击相关推荐
    change(id) {
      // console.log(id);
      this.$router.push({
        //核心语句
        path: "/playlistitem", //跳转的路径
        query: {
          //路由传参时push和query搭配使用 ，作用时传递参数
          id: id,
        },
      });
      location.reload();
    },
  },
};
</script>

<style lang="less" scoped>
.container {
  margin-top: 125px;
  display: flex;
  .left {
    width: 69%;
    padding: 10px 10px;
    background-color: #fff;
    border-radius: 20px;
    margin-right: 20px;
    margin-top: 20px;
    .head {
      display: flex;
      flex-direction: column;
      .top {
        display: flex;
        .img {
          width: 200px;
          height: 200px;
          margin-right: 40px;

          img {
            width: 200px;
            height: 100%;
            border-radius: 10%;
            box-shadow: 10px 10px 5px #ccc;
          }
        }
        .text {
          display: flex;
          flex-direction: column;
          .zhuanjiname {
            font-size: 20px;
            font-weight: 700;
            color: #000;
            margin-top: 15px;
          }
          .user {
            display: flex;
            align-items: center;
            margin-top: 15px;
            cursor: pointer;
            .pic {
              display: inline-block;
              width: 30px;
              height: 30px;
              margin-right: 10px;
              img {
                width: 100%;
                height: 100%;
              }
            }
            .name {
              font-size: 16px;
              color: #666;
              margin-right: 20px;
            }
            .time {
              color: #666;
              font-size: 15px;
            }
          }
          .tag {
            font-size: 18px;
            margin-top: 15px;
            span {
              display: inline-block;
              padding: 3px 10px;
              background-color: #fa2800;
              border-radius: 15px;
              margin-right: 10px;
              color: #fff;
              cursor: pointer;
            }
          }
          .describe {
            margin-top: 15px;
            font-size: 16px;
            word-break: break-all;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            overflow: hidden;
          }
          .more {
            margin-top: 15px;
            color: #fa2800;
            font-size: 18px;
            cursor: pointer;
          }
        }
      }
      .buttom {
        width: 100%;
        display: flex;
        justify-content: flex-end;
        .el-icon-video-play {
          padding: 10px 20px;
          border-radius: 20px;
          background-color: #fa2800;
          margin-right: 20px;
          font-size: 16px;
          color: #fff;
        }
        .el-icon-star-off {
          padding: 10px 20px;
          border-radius: 20px;
          background-color: #ccc;
          font-size: 16px;
          color: #fff;
        }
      }
    }
    table {
      width: 100%;
      table-layout: fixed;
      margin-top: 30px;
      .thead {
        background-color: #fafafa;
        height: 56px;
        font-size: 16px;
        color: #999;
        td:nth-child(1) {
          width: 10%;
          text-align: center;
        }
        td:nth-child(2) {
          width: 40%;
        }
      }
      .tbody {
        height: 22px;
        line-height: 22px;
        cursor: pointer;
        td:nth-child(1) {
          text-align: center;
          font-size: 14px;
        }
        td:nth-child(2) {
          display: flex;
          align-items: center;
          div {
            height: 100%;
            padding-top: 15px;
            margin-right: 10px;

            img {
            }
          }
          span {
            display: inline-block;
            font-size: 14px;
          }
        }
        td:nth-child(3) {
          font-size: 14px;
        }
        td:nth-child(4) {
          font-size: 14px;
        }
        td:nth-child(5) {
          font-size: 14px;
        }
      }
    }
  }
  .right {
    display: flex;
    flex-direction: column;
    margin-top: 20px;

    // 收藏歌单者样式
    .like {
      width: 320px;
      background-color: #fff;
      border-radius: 20px;
      padding: 10px;
      .head {
        padding-left: 20px;
        height: 20px;
        line-height: 20px;
        border-left: 2px solid #fa2800;
        font-size: 16px;
        font-weight: 700;
        color: #000;
      }
      .box {
        display: flex;
        flex-wrap: wrap;
        margin-top: 15px;
        li {
          padding: 5px;
          width: 35px;
          cursor: pointer;
          img {
            width: 37px;
            height: 37px;
          }
          span {
            width: 35px;
            display: inline-block;
            height: 12px;
            font-size: 10px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
          }
        }
      }
    }

    // 相关推荐样式
    .recommend {
      margin-top: 20px;
      width: 320px;
      background-color: #fff;
      border-radius: 20px;
      padding: 10px;
      .head {
        padding-left: 20px;
        height: 20px;
        line-height: 20px;
        border-left: 2px solid #fa2800;
        font-size: 16px;
        font-weight: 700;
        color: #000;
      }
      .box {
        margin-top: 20px;

        li {
          width: 320px;
          height: 50px;
          display: flex;
          margin-bottom: 15px;
          cursor: pointer;

          .pic {
            width: 50px;
            height: 50px;
            img {
              width: 100%;
              height: 100%;
            }
          }
          .text {
            width: 255px;
            padding-left: 20px;

            .title {
              line-height: 25px;
              font-size: 14px;
              color: #000;
              font-weight: 700;
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-line-clamp: 1;
              -webkit-box-orient: vertical;
            }
            .name {
              line-height: 25px;
              color: #999;
            }
          }
        }
      }
    }
    // 精彩评论样式
    .comment {
      margin-top: 20px;
      width: 320px;
      background-color: #fff;
      border-radius: 20px;
      padding: 10px;
      .head {
        padding-left: 20px;
        height: 20px;
        line-height: 20px;
        border-left: 2px solid #fa2800;
        font-size: 16px;
        font-weight: 700;
        color: #000;
      }
      .box {
        margin-top: 20px;
        li {
          display: flex;
          padding-bottom: 10px;
          cursor: pointer;

          .pic {
            width: 45px;
            height: 45px;
            margin-right: 10px;
            img {
              width: 100%;
              height: 100%;
              border-radius: 50%;
            }
          }
          .text {
            .top {
              padding-top: 5px;
              .name {
                font-size: 16px;
                margin-right: 5px;
              }
              .time {
                color: #999;
              }
            }
            .bottom {
              width: 250px;
              margin-top: 5px;
              background-color: #f5f5f5;
              color: #a5a5a5;
              padding: 5px;
              border-radius: 5px;
            }
          }
        }
      }
    }
  }
}
</style>
